<template>
	<page-meta :page-style="show ? 'overflow: hidden;' : '' ">
		<view>
			<van-sticky>
				<van-tabs swipeable :active='active' :ellipsis='false' @change='changeTab' nav-right='view'>
					<view slot="nav-right" class="right_top">
						<van-icon name="search" size='30px' />
						<van-icon name="wap-nav" size='30px' @click='show=true' />
					</view>
					<van-tab :title="item.name" :name='item.id' v-for="item in tabData" :key="item.id"></van-tab>
				</van-tabs>
			</van-sticky>
			<view class="content">
				<view v-for="item in newsList" :key="item.art_id" :data-type="item.art_id" @click="details">
					<!-- 没有图片 -->
					<view class="content_1 content_0" v-if="item.cover.type == 0">
						<!-- 标题 -->
						<view class="title">
							<view class="title_">
								{{item.title}}
							</view>
						</view>
						<view class="info">
							<view>{{item.aut_name}}</view>
							<view>{{item.comm_count}}评论</view>
							<view>{{item.pubdate}}</view>
						</view>
					</view>
					<!-- 一张图片 -->
					<view class="content_2 content_0" v-else-if="item.cover.type == 1">
						<view class="title">
							<view class="title_">
								{{item.title}}
							</view>
							<cover-image :src="itemcover"  v-for="(itemcover,index) in item.cover.images" :key="index" />
						</view>
						<view class="info">
							<view>{{item.aut_name}}</view>
							<view>{{item.comm_count}}评论</view>
							<view>{{item.pubdate}}</view>
						</view>
					</view>
					<!-- 三张图片 -->
					<view class="content_3 content_0" v-else>
						<view class="title">
							<view class="title_">
								{{item.title}}
							</view>
						</view>
						<view class="image">
							<cover-image :src="itemcover" v-for="(itemcover,index) in item.cover.images" :key="index" />
						</view>
						<view class="info">
							<view>{{item.aut_name}}</view>
							<view>{{item.comm_count}}评论</view>
							<view>{{item.pubdate}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 频道编辑 -->
			<van-popup :show='show' position='left' custom-style='width:100vw;height:100vh' closeable close-icon='close'
				@close='show=false' :lock-scroll="true">
				<view class="edit">
					<view class="header">
						<view class="title">
							<text class="title_1">我的频道</text>
							<text class="title_2">
								点击进入频道
							</text>
						</view>
						<view class="editbut">
							<van-button round size="mini" :plain="editshow ? false : true" color="#de644b"
								@click='editshow = !editshow'>
								{{editshow?'保存':'编辑'}}
							</van-button>
						</view>
					</view>
					<view class="content">
						<view class="editbtn" v-for="item in tabData" :key="item.id">
							<van-button plain round :custom-style='item.id == active ? "color:#fc6627":""'
								@click='editshow ? delTab(item.id): switchTag(item.id)'>
								{{item.name}}
							</van-button>
							<van-icon name="cross" v-show="editshow" @click='delTab(item.id)' />
						</view>
					</view>
				</view>
				<view class="edit">
					<view class="header">
						<view class="title">
							<text class="title_1">频道推荐</text>
							<text class="title_2">
								点击添加频道
							</text>
						</view>
					</view>
					<view class="content">
						<view class="contentbtn" v-for="item in tabDatas" :key="item.id">
							<van-button plain round icon='plus' @click='addchannel(item.id)'>
								{{item.name}}
							</van-button>
						</view>
					</view>
				</view>
			</van-popup>
		</view>
	</page-meta>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import request from '@/api/index.js'
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	// 控制频道编辑框的显隐
	const show = ref(false)
	// 判断是否编辑
	const editshow = ref(false)
	// tab默认选择项
	const active = ref(null)
	// 默认频道
	const tabData = ref([])
	// 获取用户频道信息
	const getTabData = async () => {

		let {
			data: {
				data
			}
		} = await request('http://toutiao.itheima.net/v1_0/user/channels')
		tabData.value = data.channels
		active.value = active.value ? active.value : data.channels[0].id
		// console.log(active.value);
	}
	// 所有频道
	const tabDatas = ref([])
	const getTabDatas = async () => {
		let {
			data: {
				data
			}
		} = await request('http://toutiao.itheima.net/v1_0/channels')
		tabDatas.value = [];
		data.channels.forEach((item) => {
			let istrue = true
			for (let i of tabData.value) {
				if (i.id == item.id) {
					istrue = false
					return
				}
			}
			if (istrue) {
				tabDatas.value.push(item)

			}

		})
	}
	// 存放用户新闻列表
	const newsList = ref([])
	// 获取新闻列表
	const getNews = async (istrue = true) => {
		let {
			data: {
				data
			}
		} = await request(
			`http://toutiao.itheima.net/v1_0/articles?channel_id=${active.value}&timestamp=${Date.now()}`)
		if (istrue) {
			newsList.value = data.results
		} else {
			newsList.value = newsList.value.concat(data.results)
			// console.log(data.results);
		}
	}
	onMounted(async () => {
		await getTabData();
		getNews()
		getTabDatas()
	})
	// 点击切换标签
	const switchTag = (id) => {
		active.value = id;
		show.value = false;
	}
	// 添加用户频道
	const addchannel = (id) => {
		const channels = tabData.value.map(item => {
			return {
				id: String(item.id),
				sep: String(item.id)
			}
		});
		channels.push({
			'id': String(id),
			'sep': String(id)
		})
		editlabel(channels)
	}
	// 添加tab标签
	const changeTab = (event) => {
		active.value = event.target.name;
		newsList.value = [];
		getNews()
	}
	// 修改tab标签
	const delTab = (id) => {
		const channels = []
		tabData.value.forEach(item => {
			if (item.id != id) {
				channels.push({
					id: item.id,
					sep: item.id
				})

			}
		});
		editlabel(channels)
	}
	// 添加和删除标签
	const editlabel = async (channels) => {
		let token = "Bearer" + ' ' + uni.getStorageSync('token')
		if (!uni.getStorageSync('token')) {
			uni.navigateTo({
				url: '/pages/Login/Login'
			})
			return
		}

		let {
			data
		} = await uni.request({
			url: 'http://toutiao.itheima.net/v1_0/user/channels',
			data: {
				channels
			},
			method: "PUT",
			header: {
				Authorization: token,
			}

		})
		if(data.message == '游客不能设置个性化频道'){
			uni.navigateTo({
				url: '/pages/Login/Login'
			})
			return
		}
		getTabData();
		getTabDatas();
	}
	//页面下拉刷新
	onPullDownRefresh(() => {
		getNews()
	})
	// 触底加载
	onReachBottom(() => {
		getNews(false)
	})
	//跳转文章详情
	const details = (e)=>{
		uni.navigateTo({
			url:`/pages/details/details?art_id=${e.currentTarget.dataset.type}`
		})
	}


</script>

<style lang="less">
	van-tabs {
		.van-tab {
			font-size: 40rpx !important;
		}

		.van-tabs__scroll {
			width: 75vw;
			height: 10vh;
		}
	}

	.right_top {
		width: 25vw;
		background-color: #fff;
		display: flex;
		align-items: center;
	}

	.content {
		// padding: 2px 12px;

		.title {
			font-size: 18px;
			// font-weight: bold;
			margin-bottom: 12px;
			display: flex;
			justify-content: space-between;

			.title_ {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;

			}

			cover-image {
				width: calc(100%/3);
				border-radius: 5px;
				height: 15vh;
			}
		}

		.info {
			font-size: 12px;
			display: flex;

			view {
				margin-right: 12px;
			}
		}

		.content_0 {
			padding: 12px 10px;
			border-bottom: 1px #00000036 solid;
		}

		.image {
			display: flex;
			justify-content: space-between;
			margin-bottom: 12px;

			cover-image {
				width: calc(100%/3.2);
				border-radius: 5px;
				height: 15vh;
			}
		}
	}

	.van-icon {
		margin-left: 14px !important;
	}

	.van-popup {
		padding: 40px 10px;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title .title_2 {
				font-size: 13px;
				color: #0000008a;
			}
		}

		.edit {
			margin-bottom: 20px;

			.content {
				margin: 10px 0;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: center;

				.contentbtn {
					.van-icon {
						font-size: 11px !important;
						margin: 0 !important;
					}
				}

				.editbtn {
					position: relative;

					van-icon {
						color: #fff;
						position: absolute;
						top: 0px;
						right: 9px;
						border: 1px #c3c2c2 solid;
						border-radius: 50%;
						background-color: #c3c2c2;
						font-size: 11px;

						.van-icon {
							margin: 0 !important;
						}
					}
				}

				van-button {
					// position: relative;

					button {
						position: relative;
						overflow: unset;
						margin: 5px 10px;
						padding: 0 25px;
						border: 0;
						background-color: #f7f8fa;
						font-size: 12px;



					}

				}
			}
		}
	}
</style>
